<template>
  <div class="bigPing">
    <div id="index" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else class="host-body">
          <div class="d-flex jc-center top-box">
            <dv-decoration-10 class="dv-dec-10" />
            <div class="d-flex jc-center">
              <dv-decoration-8
                class="dv-dec-8"
                :color="decorationColor"
                style="width: 450px; height: 120px"
              />
              <div class="title">
                <span class="title-text">在线员工状态信息</span>
              </div>
              <div class="logo" @click="$router.back()">
                <img :src="company_logo" alt="" />
                {{ company_name }}
              </div>
              <div class="time">
                <span class="text"
                  >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
                >
              </div>
              <dv-decoration-8
                class="dv-dec-8"
                :reverse="true"
                :color="decorationColor"
                style="width: 450px; height: 120px"
              />
            </div>
            <dv-decoration-10 class="dv-dec-10-s" />
          </div>
          <div class="body-box">
            <div
              class="boxShow"
              style="height: 220px"
              v-for="(item, index) in defaultList"
              :key="index"
            >
              <div class="topInfo" v-if="Object.keys(item).length != 0">
                <i class="iconfont icon-yuangongxinxi iconImages"></i>
                <div class="info">
                  <div class="item">
                    <div class="label">账号</div>
                    <div class="value">
                      {{ defaultList[index].dutyAccount }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">工序</div>
                    <div class="value">
                      {{ defaultList[index].dutyProcess }}
                    </div>
                  </div>
                  <div class="item">
                    <div class="label">昵称</div>
                    <div class="value">{{ defaultList[index].dutyName }}</div>
                  </div>
                  <div class="item">
                    <div class="label">状态</div>
                    <div class="value">
                      {{ defaultList[index].state == 1 ? "在线" : "离线" }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="bottomCation" v-if="Object.keys(item).length != 0">
                <span @click="handlerUnLine(item.dutyAccount)"> 强制下线</span>
              </div>
            </div>
          </div>
          <div class="bottom-text">©本系统由通用玻璃软件提供技术支持</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import drawMixin from "@/utils/drawMixin";
import { formatTime } from "@/utils/newDate.js";
import * as DutyApi from "@/api/assembly/duty.js";
import { mapState } from "vuex";
export default {
  mixins: [drawMixin],
  data() {
    return {
      timing: null,
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
      decorationColor: ["#568aea", "#000000"],
      dutyList: [],
    };
  },
  mounted() {
    this.timeFn();
    this.cancelLoading();
    this.initData();
    setInterval(() => {
      this.initData();
    }, 30000);
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    handlerUnLine(username) {
      this.$confirm("此操作将强制下线改用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        DutyApi.forceWork({ username }).then((res) => {
          this.$message.success(res.msg || "操作成功");
          this.initData();
        });
      });
    },
    initData() {
      DutyApi.allDutyInfo().then((res) => {
        this.dutyList = res.data;
      });
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
  },
  computed: {
    defaultList() {
      if (this.dutyList.length < 16) {
        let index = 16 - this.dutyList.length;
        let arr = [...this.dutyList];
        for (let i = 0; i < index; i++) {
          arr.push([]);
        }

        return arr;
      } else {
        return this.dutyList;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../assets/scss/index";
.png {
  width: 96%;
  height: 94%;
  // margin: 2%;
  display: flex;
  align-items: center;
  justify-content: center;
  img,
  video {
    width: 100%;
    height: 100%;
  }
}
.body-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: auto;
}
.boxShow {
  padding: 20px 0 0 0;
  width: 23%;
  display: flex;
  margin: 20px 20px 0 0;
  flex-direction: column;
  border: 1px solid #235fa7;
  .topInfo {
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    .iconImages {
      width: 120px;
      font-size: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .info {
      width: calc(100% - 120px);
      height: 100%;
      padding-right: 20px;
      display: flex;
      flex-direction: column;
      .item {
        display: flex;
        margin: 10px 0 5px 0;
        .label {
          width: 40%;
        }
        .value {
          width: 60%;
          display: flex;
          flex-direction: row-reverse;
        }
      }
    }
  }
  .bottomCation {
    width: 100%;
    height: 100%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    span:hover {
      color: #3f9cd6;
      cursor: pointer;
      text-decoration: underline;
    }
  }
}
::v-deep .dv-border-box-11-title {
  letter-spacing: 15px;
}
.inner_box {
  display: flex;
  justify-content: center;
}
::v-deep .border-box-content {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bigPing {
  width: 100%;
  height: 100%;
  background-color: #010003;
}
.chartsLine {
  flex: 1;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-8%);
}
.bottom-box {
  width: 100% !important;
}
.company-name {
  font-size: 40px;
  letter-spacing: 3.5px;
}
.top-box {
  position: relative;
  height: 70px;
}
.time {
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
}
.logo {
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 18px;
  display: flex;
  align-items: center;
  img {
    width: 40px;
    height: 40px;
    margin-right: 15px;
  }
}
.fullView {
  position: relative;
  flex: 1.4;
  margin: 180px 0px 0px 0px;
  padding-bottom: 0px;
  transform: translateY(-60px);
  .textTitle {
    width: 400px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: -80px;
    transform: translateX(-50%);
    font-size: 30px;
    letter-spacing: 10px;
    background-image: linear-gradient(to right, #007aff, #00dfff, #007aff);
    color: transparent;
    -webkit-background-clip: text;
    .sub-textTitle {
      display: flex;
      justify-content: center;
      margin-left: 10px;
    }
  }
}
.body-item-production {
  flex: 1;
}
.bottom-text {
  width: 100%;
  color: #fff;
  display: flex;
  justify-content: center;
  letter-spacing: 3px;
}
</style>
